﻿@using NineSeas.Extensions
@{    
    Style.Require("FancyBox");
    Script.Require("FancyBox");
    Script.Require("jQueryUtils");
}
<div class="save-options">
    <fieldset class="left">
        <legend>@T("How do you want to save this book?")</legend>
        <div class="option">
            <div class="input"><input type="radio" name="SaveType" id="saveOption-save" value="@Constants.SaveTypes.SaveDraft" /></div>        
            <label for="saveOption-save"><strong>@T("Save draft:")</strong> @T("The book is saved, but only you can have access to it.")</label>
            <div style="clear: both;"></div>
        </div>
        <div class="option">
            <div class="input"><input type="radio" name="SaveType" id="saveOption-publishNow" value="@Constants.SaveTypes.PublishNow" /></div>        
            <label for="saveOption-publishNow"><strong>@T("Publish now:")</strong> @T("The book is saved and published immediately.")</label>
            <div style="clear: both;"></div>
        </div>
        <div class="option">
            <div class="input"><input type="radio" name="SaveType" id="saveOption-publishLater" value="@Constants.SaveTypes.PublishLater" /></div>   
            <label for="saveOption-publishLater"><strong>@T("Publish later:")</strong> @T("The book is saved, and you can decide the time that it is available to the public. You will also need to provide a date.")</label>
            <div style="clear: both;"></div>
            <div class="publishTime">
                <input type="text" id="publishLater-date" readonly="readonly" name="ScheduledPublishDate" />
                <label class="forpicker" for="publishLater-date">@T("Date")</label>
                <input type="text" id="publishLater-time" readonly="readonly" name="ScheduledPublishTime" />            
                <label class="forpicker" for="publishLater-time">@T("Time")</label>
            </div>
        </div>    
    </fieldset>
    <fieldset class="right">
        <legend>@T("What to do after saving?")</legend>
        <div class="option">
            <div class="input"><input type="radio" name="NextAction" id="nextAction-stay" value="stay" /></div>        
            <label for="nextAction-stay"><strong>@T("Stay:")</strong> @T("Stay on this page.")</label>
            <div style="clear: both;"></div>
        </div>
        <div class="option">
            <div class="input"><input type="radio" name="NextAction" id="nextAction-toc" value="toc" /></div>        
            <label for="nextAction-toc"><strong>@T("Table of Content:")</strong> @T("Redirect to the list of chapters.")</label>
            <div style="clear: both;"></div>
        </div>
        <div class="option">
            <div class="input"><input type="radio" name="NextAction" id="nextAction-firstChapter" value="firstChapter" /></div>        
            <label for="nextAction-firstChapter"><strong>@T("Edit first chapter:")</strong> @T("Redirect to the edit page of the first chapter if any, or create a new one.")</label>
            <div style="clear: both;"></div>
        </div>
    </fieldset>
    <div style="clear:both;"></div>
    <div class="buttons">
        <a href="javascript:;" class="button button-save">@T("Submit")</a>
    </div>
</div>
@using (Script.Foot()) {
    @* generates the localization script *@
    @Display(New.DatePickerLocalization())
    @Display(New.TimePickerLocalization())
<script type="text/javascript">
    //<![CDATA[
    $(function () {
        var clearHint = function ($this) { if ($this.val() == $this.data("hint")) { $this.removeClass("hinted").val("") } };
        var resetHint = function ($this) { setTimeout(function () { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) };
        
        $("label.forpicker").each(function () {
            var $this = $(this);
            var pickerInput = $("#" + $this.attr("for"));
            if (!pickerInput.val()) {
                pickerInput.data("hint", $this.text());
                pickerInput.addClass("hinted")
                    .val(pickerInput.data("hint"))
                    .focus(function () { clearHint($(this)); })
                    .blur(function () { resetHint($(this)); });
                $this.closest("form").submit(function () { clearHint(pickerInput); pickerInput = 0; });
            }
        });
        $('#publishLater-date').datepicker({ showAnim: "" }).focus(function () { });
        $('#publishLater-time').timepicker({ stepMinute: 5 }).focus(function () { });
        
        var keys = {
            "SaveType": "NineSeas.Authoring.Book.SaveOption",
            "NextAction": "NineSeas.Authoring.Book.NextAction"
        };

        var checkChanged = function () {
            $(".save-options .option").each(function () {
                var $this = $(this);

                var input = $this.find("input");
                if (input.is(":checked")) {
                    if (!$this.hasClass("selected")) $this.addClass("selected");

                    var name = input.attr("name");
                    if (name && keys[name]) {
                        $.cookie(keys[name], input.val());
                    }
                    
                } else {
                    if ($this.hasClass("selected")) $this.removeClass("selected");
                }
            });

            if ($(".save-options .option input[value=@Constants.SaveTypes.PublishLater]").is(":checked")) {
                $(".publishTime").show();
            } else {
                $(".publishTime").hide();
            }
        };

        $(".save-options .option input").change(checkChanged);

        $.showSaveOptions = function (onSave) {
            if (onSave) {
                $(".save-options .button-save")
                    .unbind("click")
                    .bind("click", function () {
                        $('#publishLater-date, #publishLater-time').each(function () {
                            clearHint($(this));
                        });

                        $.fancybox.close();

                        onSave({
                            data: {
                                saveType: $(".save-options .option input[name=SaveType]:checked").val(),
                                scheduledPublishDate: $('#publishLater-date').val(),
                                scheduledPublishTime: $('#publishLater-time').val()
                            },
                            next: $(".save-options .option input[name=NextAction]:checked").val()
                        });
                    });
            }

            $.fancybox($(".save-options"));
        };

        $(document).ready(function () {

            $.each(keys, function (key, keyValue) {
                var cookieValue = $.cookie(keyValue);

                if (cookieValue) {
                    $(".save-options .option input[name=" + key + "][value=" + cookieValue + "]").prop("checked", true);
                }
            });

            checkChanged();
        });
    });
    //]]>
</script>
}